<template>
  <div id="app">
    <van-nav-bar @click-left="onClickLeft" left-arrow left-text="返回" />
    <transition mode="out-in" name="fade-transform">
      <router-view v-if="isRouterAlive"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true, //控制视图是否显示的变量
    };
  },
  created() {
    this.reset();
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    reload() {
      this.isRouterAlive = false; //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true; //再打开
      });
    },
    reset: function () {
      (function (designWidth, maxWidth) {
        // console.log('start')
        var doc = document,
          win = window;
        var docEl = doc.documentElement;
        var tid;
        var rootItem, rootStyle;

        function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (!maxWidth) {
            maxWidth = 540;
          }
          if (width > maxWidth) {
            width = maxWidth;
          }
          //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
          var rem = (width * 100) / designWidth;
          //兼容UC开始
          rootStyle = "html{font-size:" + rem + "px !important}";
          rootItem = document.getElementById("rootsize") || document.createElement("style");
          if (!document.getElementById("rootsize")) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = "rootsize";
          }
          if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle);
          } else {
            try {
              rootItem.innerHTML = rootStyle;
            } catch (f) {
              rootItem.innerText = rootStyle;
            }
          }
          //兼容UC结束
          docEl.style.fontSize = rem + "px";
        }
        refreshRem();

        win.addEventListener(
          "resize",
          function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
          },
          false
        );

        win.addEventListener(
          "pageshow",
          function (e) {
            if (e.persisted) {
              // 浏览器后退的时候重新计算
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
            }
          },
          false
        );

        if (doc.readyState === "complete") {
          doc.body.style.fontSize = "16px";
        } else {
          doc.addEventListener(
            "DOMContentLoaded",
            function () {
              doc.body.style.fontSize = "16px";
            },
            false
          );
        }
      })(750, 750);
    },
  },
};
</script>
<style lang="less">
::-webkit-scrollbar {
  width: 0px;
}
html {
  height: 100%;
  background: #fff;
  body {
    height: 100%;
    background: #fff;
    #app {
      height: 100%;
      background: #fff;
    }
  }
}

/* 
enter-active 定义进入过渡的结束状态
leave-active 定义离开过渡的结束状态
 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

/* 
enter定义进入过渡的开始状态
 */
.fade-transform-enter {
  opacity: 0;
  transform: translateX(0px);
}
/* 
leave-to离场动画结束后的状态
 */
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(0px);
}
</style>
